import {
  Card,
  Breadcrumb,
  Form,
  Input,
  Select,
  Radio,
  Upload,
  Button,
  message,
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { useState } from 'react'
import './index.scss'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useStore } from '@/store'
import { observer } from 'mobx-react-lite'
import { http } from '@/service'

const { Option } = Select
function Publish() {
  const layout = {
    labelCol: {
      span: 2,
    },
    wrapperCol: {
      span: 14,
    },
  }
  const { channelStore } = useStore()
  // 上传图片列表
  const [fileList, setFileList] = useState([])
  const onUploadChange = ({ fileList }) => {
    setFileList(fileList)
  }
  const [imgCount, setImgCount] = useState(3)
  const radioChange = ({ target }) => {
    setImgCount(target.value)
  }
  const onFinish = async (values) => {
    let params = { ...values }
    if (imgCount !== 0) {
      const images = fileList.map((item) => item.response?.data?.url)
      params = {
        ...params,
        cover: {
          type: values.type,
          images,
        },
      }
    }
    try {
      await http.post('/mp/articles?draft=false', params)
      message.open({
        type: 'success',
        content: '发布成功',
      })
    } catch (err) {
      message.open({
        type: 'error',
        content: '发布失败',
      })
    }
  }
  return (
    <Card
      title={
        <Breadcrumb
          items={[
            {
              title: '首页',
            },
            {
              title: '发布文章',
            },
          ]}
        />
      }
      bordered={false}>
      <Form
        {...layout}
        initialValues={{ type: 3, content: '' }}
        onFinish={onFinish}>
        <Form.Item
          label="标题"
          name="title"
          rules={[
            {
              required: true,
              message: '请输入标题!',
            },
          ]}>
          <Input placeholder="请输入标题" size="middle" />
        </Form.Item>
        <Form.Item
          label="频道"
          name="channel_id"
          rules={[
            {
              required: true,
              message: '请选择频道!',
            },
          ]}>
          <Select placeholder="请选择频道" allowClear>
            {channelStore.channelList.map((item) => (
              <Option key={item.id} value={item.id}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="封面" name="type">
          <Radio.Group onChange={radioChange}>
            <Radio value={1}>单图</Radio>
            <Radio value={3}>三图</Radio>
            <Radio value={0}>无图</Radio>
          </Radio.Group>
        </Form.Item>
        {imgCount > 0 && (
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Upload
              name="image"
              listType="picture-card"
              className="avatar-uploader"
              action="http://geek.itheima.net/v1_0/upload"
              fileList={fileList}
              showUploadList
              maxCount={imgCount}
              onChange={onUploadChange}>
              <PlusOutlined />
            </Upload>
          </Form.Item>
        )}

        <Form.Item
          label="内容"
          name="content"
          rules={[
            {
              required: true,
              message: '请输入内容!',
            },
          ]}>
          <ReactQuill theme="snow" />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 2 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}

export default observer(Publish)
